<template>
  <div class="app-container"
       v-loading="loading">
    <div class="user-detail">
      <div class="user-detail__head">
        <div class="head-item">账号ID ：{{ userInfoData.loginId }}</div>
        <div class="head-item">名称：{{ userInfoData.personName }}</div>
        <div class="head-item">徽章数：{{ userInfoData.badge }}</div>
      </div>

      <el-tabs v-model="serverPlace">
        <el-tab-pane label="国内记录"
                     name="1">
          <div class="user-detail__body"
               v-if="userInfoData.operationHistoryList.length > 0">
            <ul class="infinite-list"
                style="overflow: auto">
              <li v-for="i in userInfoData.operationHistoryList"
                  class="infinite-list-item">
                <div class="history-date">
                  {{ formatDate(i.operationTime) }}
                </div>
                {{ i.content }}
              </li>
            </ul>
          </div>
          <div v-else>
            空
          </div>

          <div class="pagination">
            <el-pagination v-if="pageshow"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-size="pageSize"
                           layout="total, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </div>

        </el-tab-pane>
        <el-tab-pane label="国外记录"
                     name="2">
          <div class="user-detail__body"
               v-if="userInfoData.operationHistoryUsList.length > 0">
            <ul class="infinite-list"
                style="overflow: auto">
              <li v-for="i in userInfoData.operationHistoryUsList"
                  class="infinite-list-item">
                <div class="history-date">
                  {{ formatDate(i.operationTime) }}
                </div>
                {{ i.content }}
              </li>
            </ul>
          </div>
          <div v-else>
            空
          </div>

          <div class="pagination">
            <el-pagination v-if="pageshow1"
                           @current-change="handleCurrentChange1"
                           :current-page="currentPage1"
                           :page-size="pageSize"
                           layout="total, prev, pager, next, jumper"
                           :total="total1">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/table'
import format from 'date-format'
export default {
  name: '',
  data() {
    return {
      pageshow: false,
      pageshow1: false,
      total: 0,
      total1: 0,
      pageSize: 10,
      currentPage: 1,
      currentPage1: 1,
      loading: true,
      serverPlace: '1',
      userInfoData: {
        badge: '',
        loginId: '',
        name: '',
        operationHistoryList: [],
        operationHistoryUsList: [],
      },
    }
  },
  mounted() {
    this.userInfo()
  },
  methods: {
    async userInfo() {
      const res = await getUserInfo({
        loginId: this.$route.query.id,
      })
      this.userInfoData.operationHistoryList = res.result.operationHistoryList
      this.total = this.userInfoData.operationHistoryList.length
      this.userInfoData.operationHistoryUsList =
        res.result.operationHistoryUsList
      this.total1 = this.userInfoData.operationHistoryUsList.length
      this.userInfoData.loginId = res.result.loginId
      this.userInfoData.badge = res.result.badge
      this.userInfoData.personName = res.result.personName

      this.loading = false

      if (this.total <= this.pageSize) {
        this.pageshow = false
      } else {
        this.pageshow = true
      }
      if (this.total1 <= this.pageSize) {
        this.pageshow1 = false
      } else {
        this.pageshow1 = true
      }
      this.userInfoData.operationHistoryList = this.userInfoData.operationHistoryList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
      this.userInfoData.operationHistoryUsList = this.userInfoData.operationHistoryUsList.slice(
        (this.currentPage1 - 1) * this.pageSize,
        this.currentPage1 * this.pageSize
      )
    },
    formatDate(date) {
      const newTime = format('yyyy-MM-dd hh:mm:ss', new Date(date))
      return newTime
    },
    handleCurrentChange(e) {
      this.currentPage = e
      this.userInfo()
    },
    handleCurrentChange1(e) {
      this.currentPage1 = e
      this.userInfo()
    },
  },
}
</script>

<style lang="scss" scoped>
.user-detail {
  &__head {
    display: flex;
  }
  .head-item {
    margin-right: 50px;
  }
}
</style>
<style lang="scss">
.user-detail {
  .el-tabs--top {
    margin-top: 20px;
  }
  .user-detail__body {
    ul {
      padding: 0;
      margin: 0;
    }
    li {
      list-style: none;
    }
    .infinite-list .infinite-list-item {
      display: flex;
      align-items: center;
      height: 50px;
      background: #e8f3fe;
      margin: 10px 0;
      color: #7dbcfc;
      padding: 0 0 0 30px;
    }
    .history-date {
      width: 200px;
    }
  }
}
</style>
